<template>
  <div ref="canvas"></div>
</template>

<script>
import * as THREE from 'three';
import fontTypeface from 'three/examples/fonts/helvetiker_bold.typeface.json';

// const THREE = require('three');

export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      canvas.clientWidth / canvas.clientHeight,
      0.1,
      1000
    );
    camera.position.z = 5;

    // 加载字体文件，可以从 https://github.com/mrdoob/three.js/tree/master/examples/fonts 目录下下载
    const fontLoader = new THREE.FontLoader();
    // fontLoader.load(fontTypeface, function (font) {
    fontLoader.load('/fonts/helvetiker_bold.typeface.json', function (font) {
      console.log(`menu_01_06.vue 24`, font);
      const textOptions = {
        font: font,
        size: 1,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelSegments: 5,
      };

      // 创建 TextGeometry 对象
      const textGeometry = new THREE.TextGeometry('皮皮爱宝宝', textOptions);

      // 创建材质
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

      // 创建网格对象
      const mesh = new THREE.Mesh(textGeometry, material);

      // 将网格对象添加到场景中
      scene.add(mesh);
    });

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0x262626);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);

    canvas.appendChild(renderer.domElement);

    function render() {
      renderer.render(scene, camera);
    }

    render();
  },
};
</script>

<style>
#canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}
</style>
